<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="地址管理" placeholder bgColor="#fff"></u-navbar>
    <view class="content">
      <view class="input-box">
        <view class="input-item">
          <view><text style="color: #E20300;">*</text>姓名</view>
          <input maxlength="10" v-model="form.receiverName" placeholder="请输入，限10个字"/>
        </view>
        <view class="input-item">
          <view><text style="color: #E20300;">*</text>手机号码</view>
          <input type="number" maxlength="11" v-model="form.receiverPhone" placeholder="请输入，限11位数字"/>
        </view>
        <view class="input-item">
          <view><text style="color: #E20300;">*</text>地址</view>
          <view class="u-flex" @click="pickerType='region'">
            <text class="u-font-28 u-m-r-20" style="color: #818181;">{{ cityList.length?cityList.join('-'):'请选择' }}</text>
            <u-icon name="arrow-right" color="#000000" size="20rpx"></u-icon>
          </view>
        </view>
        <view class="input-item" style="border: none;">
          <view><text style="color: #E20300;">*</text>详细地址</view>
          <textarea maxlength="30" auto-height v-model="form.adsDetail" placeholder="请输入，限30个字"></textarea>
        </view>
      </view>
      <view class="btn" @click="submit">确认提交</view>
    </view>
    <u-picker confirmColor="#56CB03" :show="pickerType=='region'" @change="pickerChange" :columns="[cityOptions, cityOptions[pickerIndex1].citys, cityOptions[pickerIndex1].citys[pickerIndex2].areas]" keyName="cityName" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
  </view>
</template>

<script>
import citys from '@/common/ChinaCitys.json'
import { setAddresses, putAddresses, getAddresses } from '@/api/index'
import { phoneReg } from '@/common/util'

export default {
  data() {
    return {
      id: '',
      cityOptions: citys,
      pickerType: '',
      pickerIndex1: 0,
      pickerIndex2: 0,
      form: {},
      cityCode: '',
      cityList: [],
    };
  },
  onLoad(options) {
    if(options.id) {
      this.id = options.id
      this.getForm()
    }
  },
  methods: {
    getForm() {
      getAddresses({id: this.id}).then(res => {
        this.form = res.data
        const {province, city, district, postalCode} = res.data
        this.cityList = [province, city, district]
        this.cityCode = postalCode
      })
    },
    pickerChange(e) {
      if(e.columnIndex === 0) {
        this.pickerIndex1 = e.index
      } else if(e.columnIndex === 1) {
        this.pickerIndex2 = e.index
      }
    },
    pickerConfirm(e) {
      if(this.pickerType == 'region') {
        this.cityList = [e.value[0].cityName, e.value[1].cityName, e.value[2].cityName]
        this.cityCode = e.value[2].code
      } else {
      }
      this.pickerType = ''
    },
    submit() {
      if(!phoneReg(this.form.receiverPhone)) {
        return
      }
      if(this.cityList.length == 0) {
        uni.showToast({
          icon: 'none',
          title: '请选择省市区'
        })
        return
      }
      if(!this.form.receiverName || !this.form.adsDetail) {
        uni.showToast({
          icon: 'none',
          title: '请完善基本信息'
        })
        return
      }
      const that = this
      const parameter = {
        ...this.form,
        id: this.id,
        province: this.cityList[0],
        city: this.cityList[1],
        district: this.cityList[2],
        postalCode: this.cityCode
      }
      if(this.id) {
        putAddresses({...parameter, id: this.id}).then(res => {
          uni.showToast({
						icon: 'none',
						title: `修改成功`
					})
          setTimeout(() => {
            that.goBack()
          }, 1000)
        })
      } else {
        setAddresses(parameter).then(res => {
          uni.showToast({
						icon: 'none',
						title: `新增成功`
					})
          setTimeout(() => {
            that.goBack()
          }, 1000)
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .content {
    width: 702rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .input-box {
      width: 100%;
      padding: 0 22rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      margin-bottom: 120rpx;
      .input-item {
        width: 100%;
        padding: 42rpx 0;
        border-bottom: 2rpx solid #E1E1E1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #000000;
      }
      input {
        width: 270rpx;
        font-size: 28rpx;
        color: #818181;
        text-align: right;
      }
      textarea {
        width: 470rpx;
        font-size: 28rpx;
        color: #818181;
        text-align: right;
      }
    }
    .btn {
      width: 440rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      background: #56CB03;
      border-radius: 200rpx;
      border: 2rpx solid #56CB03;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
</style>
